<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        
        <title><?php echo config_item('site_title'); ?></title>
		
		<script src="<?php echo base_url(); ?>application/assets/js/jquery.js"></script>
		<script src="<?php echo base_url(); ?>application/assets/js/jquery-1.6.4.min.js"></script>		
		<script src="<?php echo base_url(); ?>application/jquery/jquery-ui-1.8.13.custom.min.js"></script>
		<script src="<?php echo base_url(); ?>application/assets/js/bootstrap-dropdown.js"></script>
		<link href="<?php echo base_url(); ?>application/jquery/smoothness/jquery-ui-1.8.18.custom.css" rel="stylesheet">
				
		<link href="<?php echo base_url(); ?>application/assets/css/bootstrap.css" rel="stylesheet">
        <style type="text/css">
            body {
				padding-top: 80px;
				padding-bottom: 60px;
				background-color: #f5f5f5;
			}
			.leftpanel {
				width:100%;				
			}
			.leftpanel div {
				height:400px;
			}
			.filetree {
				font-size:9pt;				
			}

			#footer {
			   position:fixed;
			   left:0px;
			   bottom:-20px;
			   height:30px;
			   width:100%;
			}
			li {
				line-height: 15px;
			}
			.alert-success {
				color: #5C5C5C;
				background-color: #C7B7CD;
				border-color: #d6e9c6;
			}
			.sidebar-nav {
                padding: 9px 0;                
            }
            .nav li {
            	line-height:3;
            }
            

            /* Styles for custom vertical scrollbar */
			::-webkit-scrollbar {
			    width: 10px;
			}
			::-webkit-scrollbar-track {
			    background: #FFF;
			    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
			}
			::-webkit-scrollbar-thumb {
			    background: #CCC;
			    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
			}
			::-webkit-scrollbar-thumb:hover {
			    background: #AAA;
			}
			::-webkit-scrollbar-thumb:active {
			    background: #888;
			    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
			}
        </style>
        <link href="<?php echo base_url(); ?>application/assets/css/bootstrap-responsive.css" rel="stylesheet">

        <script type="text/javascript">
			$(document).ready(function() {
				getCategories();
				RefreshArticles("0");
            });
			
			

			function RefreshArticles(category) {
				var baseurl = $("#baseurl").val();

				$("#articles").html("");
				ShowLoader(true);

				$.ajax({         
					url: baseurl + "Articles/getArticles", 
					type: "POST",
					dataType: "json",
					data: {category: category},					        
					success: function(data) { 
						//alert('received data' + data.articles);
						ShowLoader(false);
						
						if(data.articles.length > 0) {
							
							$("#articles").append("<tbody>");
							for(i = 0; i < data.articles.length; i++) {
							$("#articles").append("<tr><td><div style=\"padding:5pt;box-shadow:1px 1px 8px 1px #B8B8B8;\"><div>" + (data.articles[i].article) 
								+ "</div><div style=\"padding-top:10pt\"><button class=\"btn btn-mini\" title=\"Like this\" onclick=\"like('" + data.articles[i].id + "')\">+<span id=\"likecount" + data.articles[i].id + "\">" + data.articles[i].cnt_likes + "</span></button> &nbsp; &nbsp;<a href=\"Articles/view?id=" + data.articles[i].id + "\" title=\"View full post\"><i class=\"icon-share-alt\"></i>&nbsp;View</a> <span class=\"muted pull-right\">Last modified on " + data.articles[i].lastmodifiedon + " | By " + data.articles[i].uname + "</span></div></div></td></tr>");
							}
							$("#articles").append("</tbody>");
						} else {
							$("#articles").html("<div class=\"text-error\">No articles found !</div>");
						}
					},
					error:function (xhr, ajaxOptions, thrownError){
						ShowLoader(false);
						alert('Error while getting articles !');
					}
				});
			}

			function getCategories() {
				var baseurl = $("#baseurl").val();

				$.ajax({         
					url: baseurl  + "Categories/getCategories", 
					type: "POST",
					dataType: "json",					        
					success: function(data) { 
						if(data.length > 0) {
							$("#categories").html("");
							$("#categories").append("<li class=\"nav-header\">Categories</li>");
							$("#categories").append("<li class=\"active\"><a href=\"javascript:void(0)\" onclick=\"activateCategory(this)\" id=\"0\"><i class=\"icon-file\"></i>&nbsp;All</a></li>");
							for(i = 0; i < data.length; i++) {
								$("#categories").append("<li class=\"catlist\"><a href=\"javascript:void(0)\" onclick=\"activateCategory(this)\" id=\"" + data[i].text + "\"><i class=\"icon-file\"></i>&nbsp;" + data[i].text + "</a></li>");
							}														
						} else {
							$("#categories").append("<li>No categories found !</li>");
						}						
					},error:function (xhr, ajaxOptions, thrownError){
						alert('Error while getting categories ! ' + thrownError);
					} 
				});
			}

			function activateCategory(el) {
				//alert('activated ' + category);
				var item = $(el).parent();
				$(".active").attr("class","catlist");
				item.attr("class","active");
				//alert($(el).attr("id"));
				RefreshArticles($(el).attr("id"));
			}

			function ShowLoader(action) {
				// true = show, false = hide
				if(action == true)
					$("#ajaxloader").show();
				else
					$("#ajaxloader").hide();
			}
			
			function like(articleid) {
				var baseurl = $("#baseurl").val();
				var userid = $("#userid").val();
				
				$.ajax({         
					url: baseurl  + "Articles/updateLike", 
					type: "POST",
					dataType: "json",
					data: {articleid: articleid, userid: userid},					        
					success: function(data) { 
						if(data != null) {
							//alert(data.likes[0].cnt_likes);
							$("#likecount"+articleid).html(data.likes[0].cnt_likes);
						}							
					},error:function (xhr, ajaxOptions, thrownError){
						alert('Error while getting likes count ! ' + thrownError);
					} 
				});
			}

        </script>
	</head>
	<body>
		<?php
			$sessiondata = $this->session->userdata('username');
			if((isset($sessiondata)) && ($sessiondata != '')) {
			echo getTopNav();
		?>
		
		<div class="container">
                <div class="well">
										
					<?php echo anchor('Articles/createNew', $button_createnew, 'title="' . $button_createnew .'", class="btn btn-success"'); ?>

				</div>
		
				<div class="row-fluid">
					<div class="span3">
                       <!-- <table id="categories" class="table table-striped"></table> -->
                       	<div class="well sidebar-nav">
                       		<ul id="categories" class="nav nav-pills nav-stacked" ></ul>
                   	  	</div>
                    </div><!--/span-->

					<div class="span9">
                       <table id="articles" class="table"></table>

                       <div id="ajaxloader" style="display:none;margin-top:50pt;width:100%;" align="center">
                       		<img src="application/assets/img/ajax-loader-white.gif" alt="loading" title="Loading posts. Please wait ...">
                       </div>
                    </div><!--/span-->
                </div><!--/row-->

                <!-- Include footer -->
                <?php include 'footer.php' ?>
            </div>
			
			<!-- Hidden variables -->
			<input type="hidden" id="baseurl" name="baseurl" value="<?php echo base_url(); ?>">
			<input type="hidden" id="userid" name="userid" value="<?php echo $this->session->userdata('userid'); ?>">
	
	<?php
		} else {
			redirect('Login');
		}
	?>
	</body>			
</html>